<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- base标签为页面上的所有链接规定默认地址或默认目标 -->
<!-- base标签为页面上的所有链接规定默认地址或默认目标 -->
<base href="<%=basePath%>">
<title>index</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/index.js"></script>
<script src="js/header.js"></script>
</head>
<body>
	<div id="box">
		<div id="header">
		<jsp:include page="common/header.jsp" flush="true" /> 
			<!--附加导航栏-->
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-2 " style="">
						<a href="index.html" style="" class=""><img
							src="images/PETCLUB2.png" alt=""></a>
					</div>
					<div class="col-md-8 col-md-offset-2" style="">
						<!-- <div class="form-group" style="position: absolute;top:50%;transform:translateY(-50%); ">
                         <input class="search" type="text" list="list" name="search" title="I am looking for..."
                                value="I am looking for... " style="width: 350px">
                         <input type="submit" name="submit">
                     </div>-->
						<div class="input-group searchForm"
							style="width: 50%; padding: 1.2%">
							<input class="form-control searchInput" type="text" list="list"
								placeholder="I am looking for..."> <span
								class="input-group-btn">
								<button class="btn btn-default searchBtn" type="submit">
									<i class="glyphicon glyphicon-search"></i>
								</button>
							</span></input>
						</div>
						<!-- datalist的数据应该是根据后台分类数据来设置 ,此处简化，直接写死算了-->
						<datalist id="list">
							<option>宠物猫</option>
							<option>宠物狗</option>
						</datalist>
					</div>
				</div>
			</div>
		</div>
		<div id="content" class="clearfix">
			<!--container：宽度较浏览器窄-->
			<div class="container">
				<div class="con-header">
					<div class="row">
						<!-- 左侧分类栏 -->
						<!-- 点击分类栏数据应当是请求search服务并且以点击的链接的值为q查询参数查询solr获得数据，跳转到search页面 -->
						<!-- 类似于：href='/search'+xx -->
						<div class="col-md-2 con-left" style="border-top: 1px solid #d4d0cd ;border-left: 1px solid #d4d0cd ;border-right: 1px solid #d4d0cd ;padding-bottom: 2%;padding-top: 1%">
							<div class="panel panel-default panel-dog" style="">
								<div class="panel-heading" style="text-align: center">
									<a href="#" class=""><i class="	glyphicon glyphicon-heart"></i>宠物狗</a>
								</div>
								<div class="panel-body category-panel-dog" style="height:115px;text-align: left;overflow: scroll;">
									<!-- <a href="#" style="margin: 5%">波斯猫</a><a href="#"
										style="margin: 5%">波斯猫</a><br> <a href="#"
										style="margin: 5%">波斯猫</a><a href="#" style="margin: 5%">波斯猫</a><br>
									<a href="#" style="margin: 5%">波斯猫</a><a href="#"
										style="margin: 5%">波斯猫</a> -->
								</div>
								<!--  <div class="panel-footer">
									<a href="#">查看更多&nbsp;<i class="glyphicon glyphicon-hand-up"></i></a>
								</div>  -->
							</div>
							<div class="panel panel-default">
								<div class="panel-heading" style="text-align: center">
									<a href="#" class=""><i class="	glyphicon glyphicon-heart"></i>宠物猫</a>
								</div>
								<div class="panel-body category-panel-cat" style="height:115px;text-align: left;overflow: scroll;">
									<!-- <a href="#" style="margin: 5%">波斯猫</a><a href="#"
										style="margin: 5%">波斯猫</a><br> <a href="#"
										style="margin: 5%">波斯猫</a><a href="#" style="margin: 5%">波斯猫</a><br>
									<a href="#" style="margin: 5%">波斯猫</a><a href="#"
										style="margin: 5%">波斯猫</a> -->
								</div>
								<!-- <<div class="panel-footer">
									<a href="#">查看更多&nbsp;<i
										class="glyphicon glyphicon-arrow-right"></i></a>
								</div>  -->
							</div>
						<!-- 	<div class="panel panel-default">
								<div class="panel-heading" style="">
									<a href="#" class="">宠物狗</a>
								</div>
								<div class="panel-body dog-panel">
									<a href="#" style="margin: 5%">波斯猫</a><a href="#"
										style="margin: 5%">波斯猫</a><br> <a href="#"
										style="margin: 5%">波斯猫</a><a href="#" style="margin: 5%">波斯猫</a><br>
									<a href="#" style="margin: 5%">波斯猫</a><a href="#"
										style="margin: 5%">波斯猫</a>
								</div>
								<div class="panel-footer">
									<a href="#">查看更多&nbsp;<i
										class="glyphicon glyphicon-arrow-right"></i></a>
								</div>
							</div> -->

						</div>
						<div class="col-md-8 con-center" style="border-top: 1px solid #d4d0cd;border-right: 2px solid #d4d0cd;border-left: 1px solid #d4d0cd">
							<!-- 大轮播图开始 -->
							<div id="myCarousel" class="carousel slide" style="">
								<!-- 轮播（Carousel）指标 -->
								<ol class="carousel-indicators">
									<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
									<li data-target="#myCarousel" data-slide-to="1"></li>
									<li data-target="#myCarousel" data-slide-to="2"></li>
								</ol>
								<!-- 轮播（Carousel）项目 -->
								<div class="carousel-inner">
									<div class="item active">
										<a href="success"><img style="border: 2px solid #d4d0cd" src="images/dog41.jpg"
											alt="First slide">
											<div class="carousel-caption">标题 1</div></a>
									</div>
									<div class="item">
										<a href="javascript:void(0);"><img style="border: 2px solid #d4d0cd"  src="images/dog41.jpg"
											alt="Second slide">
											<div class="carousel-caption">标题 2</div></a>
									</div>
									<div class="item">
										<a href="javascript:void(0);"><img style="border: 2px solid #d4d0cd"  src="images/dog41.jpg"
											alt="Third slide">
											<div class="carousel-caption">标题 3</div></a>
									</div>
								</div>
								<!-- 轮播（Carousel）导航 -->
								<a class="carousel-control left" href="#myCarousel"
									data-slide="prev">&lsaquo;</a> <a
									class="carousel-control right" href="#myCarousel"
									data-slide="next">&rsaquo;</a>
							</div>
							<!-- 大轮播图结束 -->
						</div>
						<div class="col-md-2 col-sm-4"
							style="padding-bottom:6%; border-top:1px solid #d4d0cd; border-right: 1px solid #d4d0cd">
							<span><a href="#"><img src="images/home1.jpg" alt=""></a></span>
							<div class="temp_home
							">
								<a href="http://localhost:8080/distribute-sso/page/login" class="btn btn-info" style="margin-left: 5%">登录</a>
								<a href="http://localhost:8080/distribute-sso/page/register" class="btn btn-info pull-right" style="">注册</a>
							</div>
							<span><img src="images/logo2.jpg" alt=""></span>
						</div>
					</div>

				</div>
				<!-- 小轮播图开始 -->
				<!-- 各个轮播图的链接应该是其对应的商品的页面 -->
				<div class="con-middle" style="margin-top: 1%">
					<div class="row">
						<div class="col-md-4 col-sm-6 col-xs-4"
							style="border: 1px solid #d4d0cd">
							<div id="myCarousel2" class="carousel slide" style="">
								<!-- 轮播（Carousel）指标 -->
								<ol class="carousel-indicators">
									<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
									<li data-target="#myCarousel2" data-slide-to="1"></li>
									<li data-target="#myCarousel2" data-slide-to="2"></li>
								</ol>
								<!-- 轮播（Carousel）项目 -->
								<div class="carousel-inner">
									<div class="item active" style="">
										<a href="javascript:void(0);"><img style="border:1px solid #d4d0cd;" src="images/dog1md.jpg"
											alt="First slide">
											<div class="carousel-caption">标题 1</div></a>
									</div>
									<div class="item">
										<a href="javascript:void(0);"><img
											src="images/dog1md.jpg " style="border:1px solid #d4d0cd;
											alt="Second slide">
											<div class="carousel-caption">标题 2</div></a>
									</div>
									<div class="item">
										<a href="javascript:void(0);"><img src="images/dog1md.jpg" style="border:1px solid #d4d0cd;
											alt="Third slide">
											<div class="carousel-caption">标题 3</div></a>
									</div>
								</div>
								<!-- 轮播（Carousel）导航 -->
								<a class="carousel-control left" href="#myCarousel2"
									data-slide="prev">&lsaquo;</a> <a
									class="carousel-control right" href="#myCarousel2"
									data-slide="next">&rsaquo;</a>
							</div>

						</div>
						<div class="col-md-4 col-sm-6 col-xs-4"
							style="border: 1px solid #d4d0cd">
							<div id="myCarousel3" class="carousel slide" style="">
								<!-- 轮播（Carousel）指标 -->
								<ol class="carousel-indicators">
									<li data-target="#myCarousel3" data-slide-to="0" class="active"></li>
									<li data-target="#myCarousel3" data-slide-to="1"></li>
									<li data-target="#myCarousel3" data-slide-to="2"></li>
								</ol>
								<!-- 轮播（Carousel）项目 -->
								<div class="carousel-inner">
									<div class="item active">
										<a href="javascript:void(0);"><img src="images/dog1md.jpg" style="border:1px solid #d4d0cd;
											alt="First slide">
											<div class="carousel-caption">标题 1</div></a>
									</div>
									<div class="item">
										<a href="javascript:void(0);"><img src="images/dog1md.jpg" style="border:1px solid #d4d0cd;
											alt="Second slide">
											<div class="carousel-caption">标题 2</div></a>
									</div>
									<div class="item">
										<a href="javascript:void(0);"><img src="images/dog1md.jpg" style="border:1px solid #d4d0cd;
											alt="Third slide">
											<div class="carousel-caption">标题 3</div></a>
									</div>
								</div>
								<!-- 轮播（Carousel）导航 -->
								<a class="carousel-control left" href="#myCarousel3"
									data-slide="prev">&lsaquo;</a> <a
									class="carousel-control right" href="#myCarousel3"
									data-slide="next">&rsaquo;</a>
							</div>

						</div>
						<div class="col-md-4 col-sm-6 col-xs-4"
							style="border: 1px solid #d4d0cd">
							<div id="myCarousel4" class="carousel slide" style="">
								<!-- 轮播（Carousel）指标 -->
								<ol class="carousel-indicators">
									<li data-target="#myCarousel4" data-slide-to="0" class="active"></li>
									<li data-target="#myCarousel4" data-slide-to="1"></li>
									<li data-target="#myCarousel4" data-slide-to="2"></li>
								</ol>
								<!-- 轮播（Carousel）项目 -->
								<div class="carousel-inner">
									<div class="item active">
										<a href="javascript:void(0);"><img src="images/dog1md.jpg" style="border:1px solid #d4d0cd;
											alt="First slide">
											<div class="carousel-caption">标题 1</div></a>
									</div>
									<div class="item">
										<a href="javascript:void(0);"><img src="images/dog1md.jpg" style="border:1px solid #d4d0cd;
											alt="Second slide">
											<div class="carousel-caption">标题 2</div></a>
									</div>
									<div class="item">
										<a href="javascript:void(0);"><img src="images/dog1md.jpg" style="border:1px solid #d4d0cd;
											alt="Third slide">
											<div class="carousel-caption">标题 3</div></a>
									</div>
								</div>
								<!-- 轮播（Carousel）导航 -->
								<a class="carousel-control left" href="#myCarousel4"
									data-slide="prev">&lsaquo;</a> <a
									class="carousel-control right" href="#myCarousel4"
									data-slide="next">&rsaquo;</a>
							</div>

						</div>
					</div>
				</div>
				<div class="con-bottom" style="">
					<div class="row">
						<div class="col-md-12"
							style="margin-top:2%; border-top: 1px solid #d4d0cd; border-bottom: 1px solid #d4d0cd">
							<h4>
								<b>宠物狗</b>
							</h4>
						</div>
					</div>

					<div class="row adDog">
						<div class="col-md-3 " style="border:1px solid #d4d0cd;">
							<h5 style="">柴犬</h5>
							<span style="border:1px,solid #d4d0cd"><a class="thumbnail" href="#"><img
									src="images/dog4sm.jpg" alt=""></a></span>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-tag"></i><a href="#">name:小狗</a>
							</p>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-info-sign"></i><a href="#">health:良好</a>
							</p>

						</div>
						<div class="col-md-3" style="border:1px solid #d4d0cd;">
							<h5 style="">柴犬</h5>
							<span style="border:1px,solid #d4d0cd"><a class="thumbnail" href="#"><img
									src="images/dog4sm.jpg" alt=""></a></span>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-tag"></i><a href="#">name:小狗</a>
							</p>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-info-sign"></i><a href="#">health:良好</a>
							</p>

						</div>
						<div class="col-md-3" style="border:1px solid #d4d0cd;">
							<h5 style="">柴犬</h5>
							<span style="border:1px,solid #d4d0cd"><a class="thumbnail" href="#"><img
									src="images/dog4sm.jpg" alt=""></a></span>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-tag"></i><a href="#">name:小狗</a>
							</p>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-info-sign"></i><a href="#">health:良好</a>
							</p>

						</div>
						<div class="col-md-3" style="border:1px solid #d4d0cd;">
							<h5 style="">柴犬</h5>
							<span style="border:1px,solid #d4d0cd"><a class="thumbnail" href="#"><img
									src="images/dog4sm.jpg" alt=""></a></span>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-tag"></i><a href="#">name:小狗</a>
							</p>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-info-sign"></i><a href="#">health:良好</a>
							</p>

						</div>
					</div>
					<div class="row">
						<div class="col-md-12"
							style=" border-top: 1px solid #d4d0cd; border-bottom: 1px solid #d4d0cd;">
							<h4>
								<b>宠物猫</b>
							</h4>
						</div>
					</div>
					<div class="row adCat">
						<div class="col-md-3" style="border:1px solid #d4d0cd;">
							<h5 style="">柴犬</h5>
							<span style="border:1px,solid #d4d0cd"><a class="thumbnail" href="#"><img
									src="images/dog4sm.jpg" alt=""></a></span>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-tag"></i><a href="#">name:小狗</a>
							</p>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-info-sign"></i><a href="#">health:良好</a>
							</p>

						</div>
						<div class="col-md-3" style="border:1px solid #d4d0cd;">
							<h5 style="border:1px,solid #d4d0cd">柴犬</h5>
							<span style=""><a class="thumbnail" href="#"><img
									src="images/dog4sm.jpg" alt=""></a></span>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-tag"></i><a href="#">name:小狗</a>
							</p>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-info-sign"></i><a href="#">health:良好</a>
							</p>

						</div>
						<div class="col-md-3" style="border:1px solid #d4d0cd;">
							<h5 style="border:1px,solid #d4d0cd">柴犬</h5>
							<span style=""><a class="thumbnail" href="#"><img
									src="images/dog4sm.jpg" alt=""></a></span>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-tag"></i><a href="#">name:小狗</a>
							</p>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-info-sign"></i><a href="#">health:良好</a>
							</p>

						</div>
						<div class="col-md-3" style="border:1px solid #d4d0cd;">
							<h5 style="border:1px,solid #d4d0cd">柴犬</h5>
							<span style=""><a class="thumbnail" href="#"><img
									src="images/dog4sm.jpg" alt=""></a></span>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-tag"></i><a href="#">name:小狗</a>
							</p>
							<p style="padding-top: 3%;">
								<i class="glyphicon glyphicon-info-sign"></i><a href="#">health:良好</a>
							</p>

						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="footer" style="">
			<h3 style="text-align: center">&copy;www.petclub.com</h3>
		</div>
	</div>

	<script type="text/javascript">
		
		var catNum = 0;
		var DIS = {
/* 				checkLogin : function() {
					var _ticket = $.cookie("TT_TOKEN");
					if (!_ticket) {
						return;
					}
					$
							.ajax({
								url : "http://localhost:8080/distribute-sso/user/token/"
										+ _ticket,
								dataType : "jsonp",
								type : "GET",
								success : function(data) {
									if (data.status == 200) {
										var username = data.data.username;
										var html = username
												+ "，欢迎您！<a href=\"http://www.taotao.com/user/logout.html\" class=\"link-logout\">[退出]</a>";
										$(".temp_home").html(html);
										var html2 = '<a href="http://localhost:8080/distribute-portal/page/user_info.html"><i class="glyphicon glyphicon-user"></i>&nbsp;&nbsp;个人中心</a>';
										$(".login_message").html(html2);

									}
								}
							});
				}, */
			//服务端将数据封装成json字符串返回，需要在js中将json字符串转换成js对象:JSON.parse(data,function(){})
			ad1 : JSON.parse('${ad1}'),//大轮播图
			ad2 : JSON.parse('${ad2}'),//小轮播图
			ad3 : JSON.parse('${ad3}'),//宠物猫广告
			ad4 : JSON.parse('${ad4}'),//宠物狗广告
			/* var MyCarousel : "$(#myCarousel)",
			var MyCarousel2 : "$(#myCarouse2)",
			var MyCarousel3 : "$(#myCarouse3)",
			var MyCarousel4 : "$(#myCarouse4)", */
			/* 设置分类面板内容 */
			setToCategoryPanel : function(data) {
				alert("分类列表：" + data.data[0].n);
			},
			/* 设置大轮播图内容 */
			/* 大轮播图：[{"heightB":240,"src":"http://192.168.56.8/images/2018/02/12/1518404646449876.jpg","width":756,
				"alt":"bbb","srcB":"","widthB":550,"href":"http://localhost:8080/","height":388},{"heightB":240,
				"src":"http://192.168.56.8/images/2018/02/12/1518405521488756.jpg","width":756,"alt":"big222","srcB"
				:"","widthB":550,"href":"http://localhost:8080/","height":388}] */
			setToMyCarousel : function(data) {
				$('#myCarousel .item').each(
						function(index, element) {
							//加上判断,防止服务器返回的数据不够导致浏览器报错：Cannot read property 'xxx' of undefined
							if (data[index] != null && data[index] != '') {
								//设置大轮播图链接
								$(element).find('a').attr('href',
										data[index].href);
								//设置图片路径 
								$(element).find('img').attr('src',
										data[index].src);
								//设置标题
								$(element).find('.carousel-caption').text(
										data[index].title);
							}
							//alert("index:"+index+"element.href:"+$(element).find('a').attr('href'));

						});
			},
			/* 设置小轮播图数据 */
			setToMyCarouselSmall : function(data) {
				$('.con-middle .item').each(
						function(index, element) {
							//加上判断,防止服务器返回的数据不够导致浏览器报错：Cannot read property 'xxx' of undefined
							if (data[index] != null && data[index] != '') {
								//设置大轮播图链接
								$(element).find('a').attr('href',
										data[index].href);
								//设置图片路径 
								$(element).find('img').attr('src',
										data[index].src);
								//设置标题
								$(element).find('.carousel-caption').text(
										data[index].title);
							}
							//alert("index:"+index+"element.href:"+$(element).find('a').attr('href'));

						});
			},
			/* setToMyCarousel3 : function(data) {
				alert("小轮播图2：" +data);
				$('#myCarousel3 .item').each(function (index,element) {
					alert("index:"+index+"element.href:"+$(element).find('a').attr('href'));
					//加上判断,防止服务器返回的数据不够导致浏览器报错：Cannot read property 'xxx' of undefined
					if(data[index]!=null && data[index]!=''){
						//设置大轮播图链接
						$(element).find('a').attr('href',data[index].href) ;
						//设置图片路径 
						$(element).find('img').attr('src',data[index].src) ;
						//设置标题
						$(element).find('.carousel-caption').text(data[index].title) ;
					}
					//alert("index:"+index+"element.href:"+$(element).find('a').attr('href'));
					
				});
			},
			setToMyCarousel4 : function(data) {
				alert("小轮播图3：" +data);
				$('#myCarousel4 .item').each(function (index,element) {
					alert("index:"+index+"element.href:"+$(element).find('a').attr('href'));
					//加上判断,防止服务器返回的数据不够导致浏览器报错：Cannot read property 'xxx' of undefined
					if(data[index]!=null && data[index]!=''){
						//设置大轮播图链接
						$(element).find('a').attr('href',data[index].href) ;
						//设置图片路径 
						$(element).find('img').attr('src',data[index].src) ;
						//设置标题
						$(element).find('.carousel-caption').text(data[index].title) ;
					}
					//alert("index:"+index+"element.href:"+$(element).find('a').attr('href'));
					
				});
			}, */
			setToDogAd : function(data) {
				$('.adDog .col-md-3').each(
						function(index, element) {
							if (data[index] != null && data[index] != '') {
								$(element).find('h5').text(data[index].title);
								$(element).find('span a').attr('href',
										data[index].href);
								$(element).find('img').attr('src',
										data[index].src);
								$(element).find('p:first a').attr('href',
										data[index].href);
								$(element).find('p:first a').text(
										data[index].subTitle);
								$(element).find('p:last a').attr('href',
										data[index].href);
								$(element).find('p:last a').text(
										data[index].titleDesc);
							}

						});
			},
			setToCatAd : function(data) {
				$('.adCat .col-md-3').each(
						function(index, element) {
							if (data[index] != null && data[index] != '') {
								$(element).find('h5').text(data[index].title);
								$(element).find('span a').attr('href',
										data[index].href);
								$(element).find('img').attr('src',
										data[index].src);
								$(element).find('p:first a').attr('href',
										data[index].href);
								$(element).find('p:first a').text(
										data[index].subTitle);
								$(element).find('p:last a').attr('href',
										data[index].href);
								$(element).find('p:last a').text(
										data[index].titleDesc);
							}

						});
			},
		};
		/* -------------------------------------- */
		// 遍历单个节点
		function traverseDNode(node) {
			if(typeof node === 'string'){
				//叶子节点： "/products/9.html|哈士奇"
				//将各个子分类设置为分类面板内容
				//将字符串分割为数组:[url,name]
				var arraySplit = node.split("|");
				//分类数据设置
				$('.category-panel-dog').append('<p style="padding-left:10%"><i class="glyphicon glyphicon-hand-right"></i><a href='+arraySplit[0]+' style="text-color:grey;font-size:small">'+arraySplit[1]+'</a></p>');
				/* catNum++; */
			}else{
				//如果是最上层分类，则设置到分类面板的标题上
				if(node.n.indexOf("</a>")){/* http://localhost:8080/distribute-portal/#myCarousel */
					
				}
				//父节点,
				/*  {
                    "n": "牧羊犬",

                    "u": "/products/4.html",
                    "i": [
                        "/products/16.html|边境牧羊犬",
                        "/products/18.html|德国牧羊犬"
                    ]
                }, */
			}
			
		}
		function traverseCNode(node) {
			if(typeof node === 'string'){
				//叶子节点： "/products/9.html|哈士奇"
				//将各个子分类设置为分类面板内容
				//将字符串分割为数组:[url,name]
				var arraySplit = node.split("|");
				//分类数据设置
				$('.category-panel-cat').append('<p style="padding-left:10%"><i class="glyphicon glyphicon-hand-right"></i><a href='+arraySplit[0]+' style="text-color:grey;font-size:small">'+arraySplit[1]+'</a></p>');
				/* catNum++; */
			}else{
				//如果是最上层分类，则设置到分类面板的标题上
				if(node.n.indexOf("</a>")){/* http://localhost:8080/distribute-portal/#myCarousel */
					
				}
				//父节点,
				/*  {
                    "n": "牧羊犬",

                    "u": "/products/4.html",
                    "i": [
                        "/products/16.html|边境牧羊犬",
                        "/products/18.html|德国牧羊犬"
                    ]
                }, */
			}
			
		}


		// 递归遍历树
		function traverseTree(node,type) {
			
			if(type==1){
				if (!node) {
					return;
				}

				traverseDNode(node);
				if (node.i && node.i.length > 0) {
					var j = 0;
					for (j = 0; j < node.i.length; j++) {
					/* 	if(catNum==4||catNum>4) break; */
						this.traverseTree(node.i[j],1);
					}
				}
			}else if(type==2){
				if (!node) {
					return;
				}

				traverseCNode(node);
				if (node.i && node.i.length > 0) {
					var j = 0;
					for (j = 0; j < node.i.length; j++) {
					/* 	if(catNum==4||catNum>4) break; */
						this.traverseTree(node.i[j],2);
					}
				}
			}else{
				
			}
			
		}

		/* traverseTree(root); */
		/* -------------------------------------- */
		/* 页面加载完成是触发 */
		$(function() {
			/* DIS.checkLogin(); */
			/* <!-- 搜索功能实现：请求url:/search 返回逻辑视图：search--> */
			/* <!-- 1.绑定click方法 --> */
			$('.searchBtn').click(function() {
				/* <!-- 2.获取用户输入的查询参数，并绑定到请求数据中 --> */
				var searchInput = $('.searchInput').val();
			    window.location.href = 'http://localhost:8080/distribute-portal/search.html?q=' + searchInput;
				/* $.ajax({
					url : 'search.html?q=' 8+ searchInput,
					success : function(data, textStatus, jqXHR) {
					},
					error : function(xhr, textStatus) {
						alert('search error');
					},
				}); */
			});
			//初始化各个轮播图以及分类广告数据数据
			DIS.setToMyCarousel(DIS.ad1);
			/* alert($("#myCarousel").attr("height")); */
			$(".panel-dog").attr("height","200px");
			DIS.setToMyCarouselSmall(DIS.ad2);
			DIS.setToDogAd(DIS.ad3);
			DIS.setToCatAd(DIS.ad4);
			/* jsonp请求获取分类列表数据 */
			$
					.ajax({
						type : "GET", //提交方式 
						url : "http://localhost:8080/distribute-rest/rest/itemcat/list/dog",//路径 
						//数据，这里使用的是Json格式进行传输 
						/* data : {
						"org.id" : "${org.id}"
						},  */
						/* 	数据格式：
								n:name
								u:url
								i:{
									n:name
									u:url
									i:item
								} */

						dataType : "jsonp",
						success : function(data) {
							//返回数据根据结果进行遍历（递归遍历）
							if (data.data != null && data.data.length != 0) {
								for (var i = 0; i < data.data.length; i++) {
									traverseTree(data.data[i],1);
								}
							}

						}
					});
			$
			.ajax({
				type : "GET", //提交方式 
				url : "http://localhost:8080/distribute-rest/rest/itemcat/list/cat",//路径 
				//数据，这里使用的是Json格式进行传输 
				/* data : {
				"org.id" : "${org.id}"
				},  */
				/* 	数据格式：
						n:name
						u:url
						i:{
							n:name
							u:url
							i:item
						} */

				dataType : "jsonp",
				success : function(data) {
					//返回数据根据结果进行遍历（递归遍历）
					if (data.data != null && data.data.length != 0) {
						for (var i = 0; i < data.data.length; i++) {
							traverseTree(data.data[i],2);
						}
					}

				}
			});
			/* jsonp请求获取大轮播图数据 .项目中不使用这种方式，这种方式是在客服端通过jsonp请求跨域数据，本项目使用的是在服务端通过
			httpClient方法请求rest系统的数据并包装成一个json对象返回。（服务端处理跨域的方式）
			 */
			/* $.ajax({
				type : "GET", //提交方式 
				url : "http://localhost:8080/distribute-rest/rest/list/2",//路径 
				//数据，这里使用的是Json格式进行传输 
				 data : {
				"org.id" : "${org.id}"
				},  
				 	数据格式：
						n:name
						u:url
						i:{
							n:name
							u:url
							i:item
						} 

				dataType : "jsonp",
				success : function(data) {//返回数据根据结果进行相应的处理 
					DIS.setToMyCarousel(data);
				}
			}); 
			
			*/
			
			/* $(".logoutBtn").click(function () {
				alert("click in");
				$.ajax({
					url:'http://localhost:8080/distribute-sso/user/logout/'+$.cookie("TT_TOKEN"),
					dataType:'jsonp',
					success:function(data){
						alert(data.status);
						window.location.href="http://localhost:8080/distribute-portal/index.html";
					},
				});
			}); */
		});
		
		
	</script>
	
</body>
<!-- 	$('.link-logout').click(function(){
				$.ajax({
					type:'GET',
					url : 'http://localhost:8080/distribute-sso/user/logout/' + $.cookie('TT_TOKEN'),
					dataType : 'jsonp',
					success : function(data) {
						alert("ok");
				   		 if(data.status == 200){
							/* window.location.href="http://localhost:8080/distribute-portal/index.html";  */
						window.location.reload();
						}
						
					}
				});
			}); -->
</html>